import React, { memo, useCallback, useEffect, useState } from "react";

const UseCallbackComponent = () => {
    const [count, setCount] = useState(0)
    // const change = (e) => {
    //     console.log('child按钮被点击了！')
    //     setCount(count + 1)
    // }

    const change = useCallback(() => {
        console.log('child按钮被点击了！')
        setCount(count + 1)
    }, [setCount])
    return (
        <div>
            <h1>useCallback</h1>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>按钮</button>
            <Child change={change} />
        </div>
    )
}

const Child = memo((props) => {

    useEffect(() => {
        console.log('Child组件被刷新了')
    })

    return (
        <div>
            <button onClick={(e) => props.change(e)}>child按钮</button>
        </div>
    )
})

export default UseCallbackComponent